<template>
	<view>
		<dcp-scroller :isLoading="isLoading" @refresh="refresh">
		<view class="page_height_box">
		<view v-if="info==null">
			<zero-loading type="triangle"></zero-loading>
		</view>
		<view v-if="info!=null">
			<view class="info_box">
				<view class="desc_box">
					<jyf-parser :html="content" ref="article" :tag-style="tagStyle"></jyf-parser>
				</view>
			</view>
			<view style="height: 180rpx;"></view> 
		</view>
		<view class="footer">
			<view hover-class="hover_class" class="creatbutton" @click="handleCall()">
				联系保险客服
			</view>
		</view>
		</view>
		</dcp-scroller>
		<yk-authpup ref="authpup" :isNativeHead='false' type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
	</view>
</template> 
  
<script>
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	import zeroLoading from "@/components/zero-loading/components/zero-loading/zero-loading.vue"
	export default {
		components: {
			jyfParser,
			zeroLoading,
			ykAuthpup,
		},
		data() {
			return {
				permissionID:'',
				isLoading:false,
				phone:'',
				id:0,
				content:'',
				info:null,
				tagStyle: {
					img: 'display: block;width: 100%!important;height:auto!important;',
					p:'margin-bottom: 10rpx;line-height: 50rpx;'
				},
			};
		},
		onLoad(e) {
			var a =this
			a.getArticle()
		},
		onPullDownRefresh(){
			var a = this
			a.getArticle()
		},
		methods:{
			refresh(){
				var a = this
				a.isLoading = true;
				setTimeout(()=>{
					a.getArticle()
				},200)
			},
			handleCall(){
				var a = this
				a.openAuth('CALL_PHONE')
				
				
			},
			//打开自定义权限目的弹框
			openAuth(permissionID){
				this.permissionID = permissionID;//这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(()=>{
					this.$refs['authpup'].open();
				},500)
			},
			//用户授权权限后的回调
			changeAuth(){
				var a = this
				//这里是权限通过后执行自己的代码逻辑
				console.log('拨打电话权限已授权，可执行自己的代码逻辑了');
				var temp_str = '呼叫'+  a.phone
				uni.showActionSheet({
					itemList: [temp_str],
					success: function(res) {
						console.log(res);
						if (res.tapIndex == 0) {
							uni.makePhoneCall({
								phoneNumber: a.phone,
								success: (res) => {
									console.log('调用成功!')
								},
							})
						}
					}
				})
			},
			getArticle(){
				var a =this 
				a.globalajax('common/getConfig',{
					value:'insurance'
					},'GET',function(res) {
						console.log(res);
						uni.stopPullDownRefresh()
						uni.hideLoading()
						a.isLoading = false
						if(res.data.code==200){
							a.info = res.data.data
							const regex = new RegExp('<img', 'gi');
							var richtext = res.data.data
							richtext = richtext.replace(/<table[^>]*>/gi, '<table cellpadding="0" cellspacing="0" max-width="100%" border="1" style="font-size:24rpx;max-width:100%; text-align:left;text-indent: 0em;line-height:24rpx;">'); 
							a.content = richtext.replace(regex, `<img style="max-width: 100%;"`);	
							a.getPhone()
						}else{	
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							}); 
						}
					}
				);
			},
			getPhone(){
				var a =this 
				a.globalajax('common/getConfig',{
					value:'insurance_mobile'
					},'GET',function(res) {
						console.log(res);
						uni.stopPullDownRefresh()
						uni.hideLoading()
						if(res.data.code==200){
							a.phone = res.data.data
						}else{	
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							}); 
						}
					}
				);
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.footer {
		width: 100%;
		padding-top: 12rpx;
		padding-bottom: 12rpx;
		padding-bottom: calc(12rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		position: fixed;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		border-top: 2rpx solid #EBEEF5;

		.creatbutton {
			background-color: #418AFF;
			text-align: center;
			line-height: 80rpx;
			margin: 0 auto;
			width:688rpx;
			height: 80rpx;
			border-radius: 16rpx;
			color:#fff;
			font-size: 30rpx;
			border-radius: 12rpx;
			position: relative;
			.shareBtn{
				position: absolute;
				top: 0;
				left: 0;
				width:688rpx;
				height: 80rpx;
				opacity: 0;
			}
		}
	}
.info_box{
	width: 694rpx;
	padding: 0rpx 0rpx 30rpx 0rpx;
	margin: 0 auto;
	.info_title{
		font-size: 42rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 68rpx;
		letter-spacing: 0rpx;
		color: #333333;
	}
	.desc_box{
		font-size: 30rpx;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #333333;
		padding-top: 30rpx ;
		word-break: break-all;
		white-space:normal; 
		word-wrap:break-word;
		word-break:break-word;
	}
}

</style>
